<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
 
</head>

<script src="../jquery-1.6.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../reset.css"/>
<style type="text/css">

</style>
<body>
<div style="width: 2230px;height: 1230px; background: #eeffff;"></div>
 
<script type="text/javascript">

    function logs() {
        var s = '';
        for (var i = 0,aLen = arguments.length; i < aLen; i++) {
            s += arguments[i] + ' ';
        }
        s = s.slice(0, -1);
        if (!window.console) alert(s);
        else
            console.log(s);
    }
    /**
     * .Float
     * @extends jquery.1.6.2
     * @fileOverview   浮动框
     * @author 2kid
     * @email 444212235@qq.com
     * @site 2kid.org
     * @version 1.0
     * @date 2011-08-18
     * Copyright (c) 2011-2012 2kid
     * @example
     *   $.Float();
     */
    (function($){
    
    	$.Float=function(options){
    		var opt=$.extend(true,{},$.Float.settings,options);
    		var	float=new Float(opt);
    			float.init();
    
    	}
    	var Float=function(options){
    		this.o = options;
            this.tmplate=this.o.tmplate;
            this.style=this.o.style;
            this.cont=this.o.cont;
    		this.$float=$(this.tmplate);
            this.width=0;
            this.height=0;
            this.dur={bLeft:true,bDown:true};
            this.timeID=0;

    	}
    	Float.prototype={
    		init:function(obj){
                var _this=this;
    			this.$float.css(this.style).append(this.cont).appendTo('body');
                this.width=this.$float.outerWidth();
                this.height=this.$float.outerHeight();
                var $close=$('<div>关闭</div>').css({
                    width: 24,
                    height: 20,
                    position: 'absolute',
                    right:0,
                    fontSize:12,
                    top:0,
                    cursor:'pointer',
                    background:'#efefef'
                })
                this.$float.append($close)
                this.move();
                this.$float.bind('mouseover',function(){
                   clearTimeout(_this.timeID);
                }).bind('mouseout',function(){
                   _this.move();
                });
                $close.bind('click',function(){
                    _this.$float.remove();
                })
                
    
    		},
            getScroll:function(){
                return {
                    left: document.documentElement.scrollLeft || document.body.scrollLeft,
                    top: document.documentElement.scrollTop || document.body.scrollTop,
                    width:document.documentElement.clientWidth,
                    height:document.documentElement.clientHeight
                }
            },
            move:function(){
               var _this=this;
               var scroll=_this.getScroll();
               var iLeft=parseInt(_this.$float.css('left'),10)+scroll.left-_this.$float.data('scrollleft');
               var iTop=parseInt(_this.$float.css('top'),10)+scroll.top-_this.$float.data('scrolltop');
                    if(iTop<=scroll.top){
                        this.dur.bDown=true;
                    }else if(_this.height+iTop>=scroll.height+scroll.top){
                        this.dur.bDown=false;
                    }
                     if(iLeft<=scroll.left){
                        this.dur.bLeft=true;
                    }else if(_this.width+iLeft>=scroll.width+scroll.left){
                        this.dur.bLeft=false;
                    }
                    this.dur.bDown?iTop++:iTop--;
                    this.dur.bLeft?iLeft++:iLeft--;
                 this.$float.css({left:iLeft,top:iTop});
                _this.$float.data('scrollleft',scroll.left);
                _this.$float.data('scrolltop',scroll.top);
                _this.timeID=setTimeout(function(){
                    _this.move();
                },10);
            }
    		 
    
    	}
    
    
    	$.Float.settings={
            tmplate:'<div></div>',
            style:{
                width: 100,
                height: 100,
                position: 'absolute',
                left:0,
                top:0,
                background:'#ccc'
            },
            cont:''
    	}
    })(jQuery);

$.Float({cont:'abc'});

</script>

</body>
</html>


